<template>
  <div class="container">
    <div class="main">
      <!-- 统计看板 start -->
      <div class="chart">
        <el-row>
          <el-col :span="8"><p>{{$t('m.home.statistics')}}</p>
          <el-tooltip placement="right">
          <div slot="content">{{$t('m.home.tips37')}}<br/>
          {{$t('m.home.tips38')}}</div>
          <i class="el-icon-warning"></i>
          </el-tooltip>
          </el-col>
          <el-col :span="8">
            <el-button type="text" @click="getInboundStatistics(0)">{{$t('m.home.theweek')}}</el-button>
            <el-button type="text" @click="getInboundStatistics(1)">{{$t('m.home.themonth')}}</el-button>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              @change="getInboundStatistics(2)"
              v-model="statisticsDate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('m.otherstore.startdate')"
              :end-placeholder="$t('m.otherstore.enddate')"
              :clearable="false">
            </el-date-picker>
          </el-col>
        </el-row>
        <!-- 入库统计折线图 start -->
        <div id="sChart" v-if="inboundQuantityData.length">
          <inboundChart ref="chartData" :data="inboundQuantityData"></inboundChart>
        </div>
        <!-- 入库统计折线图 end -->
      </div>
      <!-- 统计看板 end -->

      <!-- 实时看板 start -->
      <div class="footer">
        <inboundRealtimeDashboard></inboundRealtimeDashboard>
      </div>
      <!-- 实时看板 end -->
    </div>

    <!-- 异常看板 start -->
    <div class="aside">
      <inboundAbnormalDashboard></inboundAbnormalDashboard>
    </div>
    <!-- 异常看板 end -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'inbound',
  data(){
    return {
      inboundQuantityData:[],
      statisticsDate:[common.timestampSimple(new Date()- 3600 * 1000 * 24 * 15),common.timestampSimple(new Date() - 3600 * 1000 * 24)]
    }
  },
  mounted(){
    this.getInboundStatistics(2,'first')
  },
  components:{
    inboundChart:()=>import('@/components/home/inbound/inbound-line-chart'), // 入库订单统计图
    inboundRealtimeDashboard:()=>import('@/components/home/inbound/inbound-realtime-dashboard'), // 入库实时看板组件
    inboundAbnormalDashboard:()=>import('@/components/home/inbound/inbound-abnormal-dashboard') // 入库异常看板组件
  },
  computed:{
    datetimerange(){
      let [statisticsdateBegin, statisticsdateEnd] = this.statisticsDate || Array.from(2)
      return {
        statisticsdateBegin, // 统计时间段--start
        statisticsdateEnd // 统计时间段--end
      }
    }
  },
  methods:{
    // 获取入库订单统计数据
    getInboundStatistics(type,state){
      let params = type!==2?{type:type}:{...this.datetimerange,type:type}
      let options = {
        method:'get',
        url:`/homepage/inboundstatistics`,
        params:params
      }
      this.$axios(options).then(({ data }) => {
        if(!state)this.$refs.chartData.drawLine(data)
        this.inboundQuantityData = data
        let start = this.inboundQuantityData.map(item=>item.date)[0]
        let end = this.inboundQuantityData.map(item=>item.date).pop()
        this.statisticsDate = [start,end]
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 1835px;
  display: flex;
  margin: 20px;
}
.main {
  width: 64%;
  min-width: 1100px;
}
// 统计看板
.chart {
  width: 100%;
  height: 420px;
  border: 1px solid #797979;
  border-radius: 8px;
  .el-row {
    .el-col:first-child {
      display: flex;
      .el-icon-warning {
        margin-top: 22px;
        margin-left: 8px;
        font-size: 16px;
      }
    }
    p {
      text-align: left;
      font-size: 20px;
      font-weight: bold;
      margin-top: 18px;
      margin-left: 30px;
    }
    .el-button {
      font-size: 16px;
      margin-top: 22px;
      margin-left: 36px;
    }
    .el-date-editor {
      margin-top: 12px;
      margin-left: -50px;
    }
  }
}
#sChart {
  width: 100%;
  height: 80%;
}
// 实时看板
.footer {
  width: 100%;
  height: 280px;
  margin-top: 15px;
  border: 1px solid #797979;
  border-radius: 8px;
}
// 异常看板
.aside {
  width: 36%;
  min-width: 640px;
  height: 715px;
  margin-left: 15px;
  border: 1px solid #797979;
  border-radius: 8px;
}
</style>
